import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/')
  },
  {
    path: '/',
    // 命名路由 layout 有一个默认子路由，这就会导致在控制台产生警告
    // 正确的做法是： 如果有默认子路由，就不要给父路由起名字了，也就是去掉父路由中的name属性
    // name: 'layout',
    component: () => import('@/views/layout'),
    children: [
      {
        path: '', // path 为空，会作为默认子路由渲染
        name: 'home',
        component: () => import('@/views/home/')
      },
      {
        path: '/article',
        name: 'article',
        component: () => import('@/views/article/')
      },
      {
        path: '/image',
        name: 'image',
        component: () => import('@/views/image/')
      },
      {
        path: '/publish',
        name: 'publish',
        component: () => import('@/views/publish/')
      },
      {
        path: '/comment',
        name: 'comment',
        component: () => import('@/views/comment/')
      },
      {
        path: '/fans',
        name: 'fans',
        component: () => import('@/views/fans/')
      },
      {
        path: '/settings',
        name: 'settings',
        component: () => import('@/views/settings/')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 路由导航守卫（拦截器）的作用就是控制页面的访问状态（是否能被访问）
// 路由导航守卫： 说白了所有页面的导航都会经过这里
// 守卫页面的导航
// to: 要去的路由页面信息
// from: 来自哪里的路由信息
// next: 方形方法
router.beforeEach((to, from, next) => {
  // 如果要访问的页面不是 /login 校验登录状态
  // 如果没有登录，则跳转到登录页
  // 如果登录了，则运行通过，通过必须调用 next() 方法
  const user = JSON.parse(window.localStorage.getItem('admin-user'))

  // 非登录页面时，判断是否是登录状态(在本地存储中的admin-user是否有值)
  // 如果本地存储中的admin-user有值，则认为是已经登录过的，就可以放行，继续访问页面
  // 如果本地存储中的admin-user没有值，那么就认为未登录，那么就得跳转到登录页面进行登录
  if (to.path !== '/login') {
    if (user) {
      // 已登录，运行通过
      next()
    } else {
      // 没有登录，就跳转到 login 登录页面
      next('/login')
    }
  } else {
    // 登录页面，正常运行通过
    next()
  }
})

export default router
